<script setup>
import { ref } from 'vue'
import { getSchoolListService } from '@/api/school'
import { userRegisterService } from '@/api/user'

const schoolList = ref([])
const fileschoollist = ref([])
// 自定义过滤方法
const filterSchool = (query, option) => {
  console.log('query:', query)
  console.log('option:', option)
  if (!query) {
    fileschoollist.value = schoolList.value
    return true
  }
  let a = schoolList.value.filter((item) =>
    item.schoolname.toLowerCase().includes(query),
  )
  fileschoollist.value = a
  return
}

//页面加载完成获取学校
const form = ref(null)
//页面加载完成获取学校
onMounted(async () => {
  const res = await getSchoolListService()
  //获取到的学校信息
  let r = res.data.data.data
  //将学校信息赋值给学校列表
  console.log(schoolList.value)
  schoolList.value = r
  fileschoollist.value = r
  console.log(r)
})

//注册
const register = async () => {
  // 验证表单数据
  await form.value.validate()
  //获取from对象
  console.log(form.value)
  //弹出等待框
  ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    let res = await userRegisterService(form.value)
    console.log(res.data.data)
    //弹出消息对话框
    //根据id过滤学校信息
    if (res.data.code === 200) {
      let school = schoolList.value.find(
        (item) => item.id === res.data.data.schoolCode,
      )
      let s = school.schoolname
      ElMessageBox.alert(
        `
  <div class="user-info-container">
    <p class="info-item">
      <span class="info-label">姓名:</span>
      <span class="info-value">${res.data.data.name}</span>
    </p>
    <p class="info-item">
      <span class="info-label">登录账号:</span>
      <span class="info-value">${res.data.data.userName}</span>
    </p>
    <p class="info-item">
      <span class="info-label">电话:</span>
      <span class="info-value">${res.data.data.phone}</span>
    </p>
    <p class="info-item">
      <span class="info-label">学校:</span>
      <span class="info-value">${s}</span>
    </p>
    <p class="info-item">
      <span class="info-label">初始密码:</span>
      <span class="info-value">${res.data.data.password}</span>
    </p>
    <p class="password-tip">登陆之后记得修改初始密码</p>
  </div>
  `,
        '管理员信息',
        {
          dangerouslyUseHTMLString: true,
        },
      )

      //关闭等待框
      ElLoading.service().close()
    } else {
      ElMessage.error(res.data.msg)
      //关闭等待框
      ElLoading.service().close()
    }
  } catch (err) {
    // ElMessage.error(err.message)
    //关闭等待框
    ElLoading.service().close()
  }
}

//表单验证
const rules = ref({
  userName: [
    { required: true, message: '请输入登录账号', trigger: 'blur' },
    { max: 20, message: '登录账号不能超过20个字符', trigger: 'blur' },
  ],
  name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],

  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { len: 11, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  schoolCode: [
    { required: true, message: '请选择学校', trigger: 'change' },
    { type: 'number', message: '学校编号必须为数字', trigger: 'blur' },
  ],
})

//初始化对象
const initFormValue = () => {
  form.value = {
    userName: '',
    name: '',
    phone: '',
    schoolCode: '',
  }
}
initFormValue()
</script>

<template>
  <page-container title="注册管理员">
    <el-row>
      <el-col :span="12">
        <div width="300px">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="80px"
            max-width="50%"
          >
            <el-form-item prop="school">
              <el-select
                v-model="form.schoolCode"
                placeholder="请选择学校"
                :filter-method="filterSchool"
                filterable
              >
                <el-option
                  v-for="item in fileschoollist"
                  :key="item.id"
                  :label="item.schoolname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="登录账号">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register">提交修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </page-container>
</template>
<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background:
      url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.user-info-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: white;
}

.info-item {
  margin-bottom: 8px;
}

.info-label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}

.password-tip {
  margin-top: 12px;
  color: #f56c6c;
  font-style: italic;
}

.el-message-box__container {
  max-width: 500px;
  margin: 0 auto;
}
</style>
